<template>
  <div class="query-form">
    <el-form
      ref="queryFormRef"
      :model="formData"
      :inline="inline"
      :label-width="labelWidth"
      :size="size"
      class="query-form-content"
      @submit.prevent="handleSearch"
    >
      <slot :form-data="formData" :form-ref="queryFormRef"></slot>
      
      <el-form-item v-if="showActionButtons" class="query-form-actions">
        <el-button 
          type="primary" 
          :icon="Search" 
          :loading="searching"
          @click="handleSearch"
        >
          {{ searchButtonText }}
        </el-button>
        <el-button 
          :icon="Refresh" 
          @click="handleReset"
        >
          {{ resetButtonText }}
        </el-button>
        <el-button 
          v-if="showExpandButton" 
          type="primary" 
          link 
          @click="toggleExpand"
        >
          {{ expanded ? '收起' : '展开' }}
          <el-icon>
            <ArrowUp v-if="expanded" />
            <ArrowDown v-else />
          </el-icon>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElForm } from 'element-plus'
import { Search, Refresh, ArrowUp, ArrowDown } from '@element-plus/icons-vue'

// 定义属性
const props = defineProps({
  // 表单数据
  modelValue: {
    type: Object,
    default: () => ({})
  },
  // 是否内联表单
  inline: {
    type: Boolean,
    default: true
  },
  // 标签宽度
  labelWidth: {
    type: [String, Number],
    default: '80px'
  },
  // 表单大小
  size: {
    type: String,
    default: 'default'
  },
  // 是否显示操作按钮
  showActionButtons: {
    type: Boolean,
    default: true
  },
  // 搜索按钮文本
  searchButtonText: {
    type: String,
    default: '查询'
  },
  // 重置按钮文本
  resetButtonText: {
    type: String,
    default: '重置'
  },
  // 是否显示展开按钮
  showExpandButton: {
    type: Boolean,
    default: false
  },
  // 是否展开
  expanded: {
    type: Boolean,
    default: false
  },
  // 搜索状态
  searching: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits([
  'update:modelValue',
  'search',
  'reset',
  'expand'
])

// 表单引用
const queryFormRef = ref<InstanceType<typeof ElForm> | null>(null)

// 表单数据
const formData = reactive({ ...props.modelValue })

// 处理搜索
const handleSearch = () => {
  emit('search', { ...formData })
}

// 处理重置
const handleReset = () => {
  // 重置表单数据
  Object.keys(formData).forEach(key => {
    formData[key] = ''
  })
  
  emit('update:modelValue', { ...formData })
  emit('reset')
}

// 切换展开状态
const toggleExpand = () => {
  emit('expand', !props.expanded)
}

// 监听表单数据变化
const updateFormData = () => {
  emit('update:modelValue', { ...formData })
}

// 定义暴露的方法
defineExpose({
  form: queryFormRef,
  reset: handleReset
})
</script>

<style lang="scss" scoped>
.query-form {
  background: #fff;
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.query-form-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.query-form-actions {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
</style>